<template>
  <slot
    v-if="!hideToggle"
    :showProtocol="showProtocol"
    :protocolTitle="protocolTitle"
  >
    <text @click="showProtocol(true)">{{ protocolTitle }}</text>
  </slot>
  <u-popup mode="bottom" :show="show" closeable @close="onClose">
    <slot name="content">
      <user-protocol v-if="type === ProtocolTypeEnum.USER" />
      <privacy-protocol v-else-if="type === ProtocolTypeEnum.PRIVACY" />
    </slot>
  </u-popup>
</template>
<script setup lang="ts">
import userProtocol from "./user.vue";
import privacyProtocol from "./privacy.vue";
import { computed, type PropType } from "vue";
import { ProtocolTypeEnum } from "@/utils";
const props = defineProps({
  /** 是否展示协议 */
  show: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String as PropType<ProtocolTypeEnum>,
    required: true,
  },
  hideToggle: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:show"]);

const getProtocolTitle = (type: ProtocolTypeEnum) => {
  switch (type) {
    case ProtocolTypeEnum.PRIVACY:
      return "《隐私协议》";
    case ProtocolTypeEnum.USER:
      return "《用户协议》";
    default:
      return "";
  }
};

const protocolTitle = computed(() => {
  return getProtocolTitle(props.type);
});

const showProtocol = (status = true) => {
  emits("update:show", status);
};

const onClose = () => {
  showProtocol(false);
};

defineExpose({
  showProtocol,
  getProtocolTitle,
});
</script>
